<template>
<div class="box"> 
  <div class="box-con">
    <!-- <h4>{{goods.sz.objectName}}</h4> -->
      <ul>
        <li v-for="(good,index) in goods" :key="index"><div><img :src="good.img" /></div><p>{{good.text}}</p></li>
      </ul>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name:"ClassifyNavListCon",
  props:["type"],
  data:function(){
   return{
      goods: [{
            "id": "878911",
            "text": "卫衣",
            "img": require("assets/img/img1.jpg"),
            "type": "男装"
        },
        {
            "id": "878912",
            "text": "卫衣",
            "img": require("assets/img/img2.jpg"),
            "type": "男装"
        },
        {
            "id": "878913",
            "text": "卫衣",
            "img":require("assets/img/img3.jpg"),
            "type": "男装"
        },
        {
            "id": "01001",
            "text": "卫衣",
            "img": require("assets/img/img4.jpg"),
            "type": "男装"
        },
        {
            "id": "01002",
            "text": "卫衣",
            "img": require("assets/img/img5.jpg"),
            "type": "男装"
        },
        {
            "id": "01003",
            "text": "卫衣",
            "img": require("assets/img/img6.jpg"),
            "type": "球鞋"
        },
        {
            "id": "01004",
            "text": "卫衣",
            "img": require("assets/img/img7.jpg"),
            "type": "球鞋"
        },
        {
            "id": "01005",
            "text": "卫衣",
            "img": require("assets/img/img8.jpg"),
            "type": "品牌"
        },
        {
            "id": "01006",
            "text": "卫衣",
            "img": require("assets/img/img9.jpg"),
            "type": "品牌"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img10.jpg"),
            "type": "女装"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img11.jpg"),
            "type": "女装"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img12.jpg"),
            "type": "女装"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img13.jpg"),
            "type": "男装"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img14.jpg"),
            "type": "男装"
        },
        {
            "id": "01007",
            "text": "卫衣",
            "img": require("assets/img/img15.jpg"),
            "type": "男装"
        }
    ]
   }
  },
  // async created(){
  //       let res = await axios({
  //           url:"http://localhost:3000/goods",
  //           params:{
  //               type:this.type  
  //           }
  //       });        
  //       this.goods = res.data;
  //   },
  //   watch:{
  //       async type(){
  //           console.log(this.type);
  //            let res = await axios({
  //               url:"http://localhost:3000/goods",
  //               params:{
  //                   type:this.type
  //               }
  //           });            
  //           this.goods = res.data;
  //       }
  //    }
}
</script>
<style scoped>
.box{
  width: 279px;
  height: 800px;
  overflow-y: auto;
}
.box .box-con{
  width:100%;
  float: left;
  flex-wrap: wrap;
  margin:10px auto;
}
.box .box-con h4{
 margin-left: 15px;
}

.box .box-con ul{
 width: 92%;
 margin-left: 15px;
 margin-top: 15px;
 display: flex;
 flex-wrap: wrap;
 /* justify-content: space-between; */
 /* border-bottom: 1px solid #ccc; */
}

.box .box-con ul li {
    width: 32%;
    height:120px;
    text-align: center;
    position: relative;
    margin-bottom:40px;
    flex-shrink: 0;
}
.box .box-con ul li div{
  width: 90%;
  height: 120px;
  background-color: rgb(245, 243, 243);
}
.box .box-con ul li img {
    width: 80%;
    height: 90px;
    margin: 15px auto;
}

.box .box-con  ul li p {
    font-size: 15px;
    padding-top: 10px;
    color: #ccc;
}

</style>